<template>
  <div class="punch-wrap">
    <div class="punch-search">
      <img src="./back.png" class="back" @click="backPage" onclick="return false"/>
      <div class="search-box">
        <datetime format="YYYY-MM-DD" v-model="kaTime" class="title" placeholder="选择搜索日期" :end-date="date"></datetime>
        <img src="./down.png" class="pic1" onclick="return false"/>
        <div class="line"></div>
        <input type="text" class="name" placeholder="请输入姓名或身份证号" v-model="check" @input="checkIcon"/>
        <img src="./close.png" class="pic2" v-show="showIcon" @click="clear" onclick="return false"/>
      </div>
      <div class="search-btn" @click="search">搜索</div>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad" class="punch-box"
      :immediate-check="false"
    >
      <div class="punch-con" v-for="(item,index) in punchList" :key="index" v-if="punchList.length">
        <div class="punch-con1">
          <span class="username">{{item.userName}}</span>
          <div class="time-box">
            <div class="time-con">
              <span class="time work-class1" :class="{'work-class2':(item.kaTime!=null && item.kaTime.length)}">{{item.workClass}}:&nbsp;</span>
              <div class="time" v-if="item.kaTime!=null && item.kaTime.length">
                <span class="clock1" v-for="(kaTime,i) in item.kaTime" :key="i">{{kaTime | formatSec}}</span>
              </div>
              <div class="time" v-else>
                <span class="clock2">未打卡</span>
              </div>
            </div>
            <div class="number">{{kaTime}}&nbsp;打卡<span>{{item.punchNum}}</span>次</div>
          </div>
        </div>
        <div class="punch-con2">
          <span>身份证号：{{item.userCardNumber}}</span>
          <span>企业：{{item.mechanismName}}</span>
          <span>入职日期：{{item.workTime}}</span>
          <div class="work-num" v-if="item.workNum!='' && item.workNum!=null">工号：{{item.workNum}}</div>
          <div class="work-num" v-else>工号：<span class="clock3">未添加</span></div>
          <span>部门（段位）：{{item.duan}}</span>
          <span>打卡地点：{{item.address}}</span>
        </div>
      </div>
    </van-list>

    <div class="empty-wrap" v-if="punchList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../../config/env"
  import {Datetime} from 'vux'
  import {formatDate} from "../../config/util"

  export default {
    data() {
      return {
        kaTime: this.$route.query.month,
        check: "",
        punchList: [],
        showIcon: false,
        currentPage: 1,
        PageSize: 20,
        loading: false,
        finished: false,
        date: "",
        punchNum: "",
        mechanismId: "",
        userSign: ""
      }
    },
    mounted() {
      this.mechanismId = this.$route.query.mechanismId;
      this.date = formatDate(new Date(), "yyyy-MM-dd");
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
    },
    methods: {
      onLoad() {
        // 异步更新数据
        if (!this.timer) {
          this.timer = setTimeout(() => {
            if (this.check == "") {
              this.loading = false;
              this.finished = true;
              this.timer = null;
              return;
            } else {
              this.queryPunch();
              this.timer = null;
            }
          }, 500)
        }
      },
      checkIcon() {
        if (this.check != "" && this.check != null && this.check != undefined) {
          this.showIcon = true;
        } else {
          this.showIcon = false;
        }
      },
      backPage() {
        this.$router.go(-1);
      },
      search() {//根据条件查询
        if (this.check == "") {
          this.$vux.toast.text("请输入姓名或身份证号", "middle");
          return;
        }
        this.initVanList();
      },
      initVanList() {//初始化
        this.currentPage = 1;
        this.PageSize = 20;
        this.punchList = [];
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.onLoad();
        }
      },
      clear() {//清空
        this.check = "";
        this.showIcon = false;
      },
      queryPunch() {
        let time = (new Date()).getTime();
        let url = baseUrl + "/data/get_user_ka_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/data/get_user_ka_list?mechanismId=" + this.mechanismId + "&kaTime=" + this.kaTime + "&kaStatus=all" + "&check=" + this.check + "&page=" + this.currentPage + "&size=" + this.PageSize + "&sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data.list != null && resultObj.data.list.length > 0) {
              this.punchList = this.punchList.concat(resultObj.data.list);

              for (let i = 0; i < this.punchList.length; i++) {
                if (this.punchList[i].kaTime != null) {
                  this.punchList[i].punchNum = this.punchList[i].kaTime.length;
                } else {
                  this.punchList[i].punchNum = 0;
                }
              }
              //加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {//数据全部加载完成
              this.loading = false;
              if (this.punchList.length >= resultObj.data.list.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      }
    },
    filters: {
      format(time) {
        return time.substr(0, 4) + "-" + time.substr(5, 2) + "-" + time.substr(8, 2);
      },
      formatSec(time) {
        return time.substr(11, 2) + ":" + time.substr(14, 2);
      }
    },
    components: {
      Datetime
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/stylus/mixin.styl";

  .punch-wrap
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    .punch-search
      wh(100%, 1.2rem)
      background: rgba(60, 175, 255, 1)
      display: flex
      align-items: center
      position: fixed
      top: 0
      z-index: 99
      .back
        margin-left: 0.2rem
        margin-right: 0.253rem
        wh(0.48rem, 0.48rem)
      .search-box
        display: flex
        align-items: center
        wh(76%, 0.8rem)
        background: rgba(255, 255, 255, 1)
        border-radius: 0.387rem
        .title
          padding-left: 0.253rem
          padding-right: 0.12rem
          font-size: 0.32rem
          font-weight: 500
        .title >>> .weui-cell__ft
          color: rgba(60, 175, 255, 1)
        .title >>> .weui-cell__ft .vux-cell-value
          color: rgba(60, 175, 255, 1)
        .pic1
          wh(0.267rem, 0.267rem)
        .line
          margin-left: 0.107rem
          margin-right: 0.28rem
          wh(0.027rem, 0.48rem)
          background: rgba(204, 204, 204, 1)
        .name
          width: 51%
          height: 0.5rem
          line-height: 0.5rem
          font-size: 0.373rem
          color: rgba(204, 204, 204, 1)
        .pic2
          margin-right: 0.16rem
          wh(0.48rem, 0.48rem)
          margin-left: auto
      .search-btn
        margin-right: 0.347rem
        margin-left: auto
        font-size: 0.427rem
        color: rgba(255, 255, 255, 1)
    .punch-box
      position: absolute
      top: 1.2rem
      width: 100%
      background: rgba(242, 242, 242, 1)
      .punch-con
        wh(100%, 5.12rem)
        background: rgba(255, 255, 255, 1)
        margin-bottom: 0.267rem
        .punch-con1
          margin: 0 auto
          display: flex
          justify-content: space-between
          align-items: center
          border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
          wh(93.6%, 1.173rem)
          .username
            font-size: 0.453rem
            color: rgba(51, 51, 51, 1)
          .time-box
            display: flex
            flex-direction: column
            align-items: flex-end
            .time-con
              display: flex
              align-items: center
              .time
                font-size: 0.373rem
                font-weight: 500
                padding-bottom: 0.047rem
              .clock1
                color: rgba(60, 175, 255, 1)
                padding-left: 0.1rem
              .clock2
                color: rgba(255, 83, 83, 1)
              .work-class1
                color: rgba(255, 83, 83, 1)
              .work-class2
                color: rgba(60, 175, 255, 1)
            .number
              padding-top: 0.047rem
              font-size: 0.32rem
              color: rgba(153, 153, 153, 1)
        .punch-con2
          font-size: 0.373rem
          color: rgba(102, 102, 102, 1)
          display: flex
          flex-direction: column
          justify-content: center
          margin: 0 auto
          wh(93.6%, 3.92rem)
          span
            padding-bottom: 0.24rem
            &:nth-child(1)
              padding-top: 0.32rem
          .work-num
            margin-bottom: 0.24rem
          .clock3
            color: #CCC
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 1.2rem
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)

</style>
